<template>
  <Card>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <Form-item label="账号" prop="Name">
        <Input v-model="formValidate.Name" disabled></Input>
      </Form-item>
      <Form-item label="姓名" prop="Abbr">
        <Input v-model="formValidate.Abbr" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="性别" prop="Sex">
        <Radio-group v-model.number="formValidate.Sex">
          <Radio label="1">男</Radio>
          <Radio label="0">女</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="职业" prop="Expert">
        <Input v-model="formValidate.Expert" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="职务" prop="Job">
        <Input v-model="formValidate.Job" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="电话" prop="Phone">
        <Input v-model="formValidate.Phone" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="Email" prop="Email">
        <Input v-model="formValidate.Email" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="照片上传">
        <Row>
          <i-col span="12">
            <Upload ref="upload" :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :on-remove="handleRemove" :before-upload="handleBeforeUpload" type="drag" :action="actionUrl">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或将文件拖拽到这里上传（仅限于mp4、flv格式文件）</p>
              </div>
            </Upload>
          </i-col>
          <i-col span="12" v-if="formValidate.Photo">
            <div class="demo-upload-list">
              <img :src="imgUrl" class="upload-img">
            </div>
          </i-col>
        </Row>
      </Form-item>
      <Form-item label="介绍" prop="remark">
        <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
      </Form-item>
      <Form-item>
        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
      </Form-item>
    </Form>
  </Card>
</template>

<script>
import {
  SERVER_CPT_URL,
  V_ROOT
} from '@/api/config'
export default {
  data() {
    return {
      formValidate: {
        Name: '',
        Abbr: '',
        Sex: 1,
        Expert: '教师',
        Job: '班主任',
        Photo: '../../assets/default.jpg',
        Phone: '13900000000',
        Email: '',
        remark: ''
      },
      ruleValidate: {
        Name: [{
          required: true,
          message: '姓名不能为空',
          trigger: 'blur'
        }],
        Email: [{
          required: true,
          message: '邮箱不能为空',
          trigger: 'blur'
        },
        {
          type: 'email',
          message: '邮箱格式不正确',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  watch: {
    // console.log(this.state.userInfo)
    userInfo() {
      console.log(this.state.userInfo)
      if (this.state.userInfo) {
        this.formValidate = this.state.userInfo
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.app.userInfo
    },
    state() {
      return this.$store.state.app
    },
    actionUrl() {
      return SERVER_CPT_URL + '/upload/PhotoUpload?token=' + this.state.token
    },
    imgUrl() {
      if (!this.state.userInfo.Photo) {
        return "/static/img/default.jpg"
      } else {
        return V_ROOT + '/' + this.state.userInfo.Photo
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$api.UpdateUserProf(this.formValidate).then(res => {
            if (!res.error) {
              this.$store.dispatch('getUserInfo')
              this.$Message.success(res.message)
            } else {
              this.$Message.error(res.message, 4)
            }
          }, err => {
            this.$Message.error(res.message, 4)
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset(name) {
      this.VideoCancel()
      this.$store.dispatch('getUserInfo')
      this.formValidate = this.state.userInfo
    },
    VideoCancel() {
      let row = {
        Url: this.formValidate.Photo
      }
      if (this.isUpload) {
        this.$api.PhotoCancel(row).then(res => {
          console.log("ok")
        })
      }
      //        this.formValidate.Img='http://192.168.1.139/live/time.jpg'
      this.$refs['upload'].clearFiles()
      this.$refs['formValidate'].resetFields()
      //        if(!this.formValidate.Photo){
      //          return
      //        }
      this.isUpload = false
    },
    handleRemove(file) {
      // 从 upload 实例删除数据
      this.VideoCancel()
      //        const fileList = this.$refs.upload.fileList;
      //        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      // 因为上传过程为实例，这里模拟添加 url
      //        this.$Notice.warning({
      //          title: '超出文件大小限制',
      //          desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      //        });
      console.log(res, file)
      this.isUpload = true
      //        this.imgName=res.jdata.Img
      //        this.imgName='http://192.168.1.139/live/520414a01d54b32f47eec151f5475dbf/imag/e9fe9995e0c3f3d828db0931d955d9d3.jpg'
      //        this.formValidate.Title=res.jdata.Title
      //        this.formValidate.Img=this.imgName
      this.formValidate.Photo = res.jdata
      //        file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
      //        file.name = '7eb99afb9d5f317c912f08b5212fd69a';
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      });
    },
    handleBeforeUpload() {
      const check = this.$refs.upload.fileList < 2;
      //        console.log(check)
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 1张图片。'
        });
      }
      return check;
    }
  },
  mounted() {
    this.formValidate = this.state.userInfo
  }
}
</script>
